<template>
  <div style="height:100%;width:100%;position:relative">
    <div class="pagetop">
      <div style="width: 100%;">
        <table border="0" style="width:100%;font-size:12px;white-space: nowrap;max-width: 800px;">
          <tr>
            <td align="left" colspan="4">
              <el-radio-group v-model="LogType" @change="logtype_change">
                <el-radio :label="1">主程序(包括实时接口)日志</el-radio>
                <el-radio :label="2">后台服务日志</el-radio>
                <el-radio :label="3">解码日志</el-radio>
              </el-radio-group>
            </td>
            <td align="right">HIS接口</td>
            <td>
              <el-select v-model="hisinter" :disabled="LogType == 3" multiple collapse-tags style="width:240px">
                <el-option :key="item.value" :value="item.value" :label="item.label"
                  v-for="item in Hisinterface"></el-option>
              </el-select>
            </td>
            <td align="right">{{ LogType == 3 ? "仪器解码" : "程序代号" }}</td>
            <td>
              <el-input v-model="LogPrgnoName"
                @dblclick.native="LogType == 3 ? dialogInstrVisible = true : dialogPrgVisible = true;"
                :placeholder="LogType == 3 ? '双击可开窗选择仪器解码' : '双击可开窗选择程序代号'" @change="prgnoinput"></el-input>
              <!-- <rm-ddl-common datatype="prgno" dataname="程序代号" v-model="LogPrgno" width="160px" @beforechange="prgnoinput"></rm-ddl-common> -->
              <!-- <el-autocomplete v-model="LogPrgnoName" :fetch-suggestions="querySearch" class="inline-input" :clearable="true" popper-class="mini-select" placeholder="请输入程序代号" style="width:160px" :trigger-on-focus="false" @select="handleSelect" @input="LogPrgno = LogPrgnoName">
                                          <template slot-scope="{ item }">
                                              <div class="name" style="width: 300px">{{ item.hidkey }} {{ item.hidname }}</div>
                                          </template>
                                      </el-autocomplete> -->
            </td>

          </tr>
          <tr>
            <td align="right">IP</td>
            <td>
              <!-- <rm-ddl-common1 datatype="ipcomputeruser" dataname="IP" v-model="LogClientip" width="160px"></rm-ddl-common1> -->
              <!-- <el-cascader v-model="LogClientip" :options="ComputerOption" @change="handleChange" style="width:200px" ></el-cascader> -->
              <el-input v-model="LogClientip" style="width:200px" clearable @keyup.space.native="popbigtab"
                @dblclick.native="popbigtab"></el-input>
            </td>
            <td align="right">级别</td>
            <td>
              <el-select v-model="LogLevel" clearable style="width:150px">
                <el-option label="普通输出信息" value="Info"></el-option>
                <el-option label="调试信息" value="Debug"></el-option>
                <el-option label="错误信息" value="Error"></el-option>
                <el-option label="SQL语句执行时间过长" value="SQLOT"></el-option>
              </el-select>
            </td>
            <td align="right">条码号</td>
            <td>
              <el-input v-model="barcode" style="width:240px"></el-input>
            </td>
            <td align="right">报告ID</td>
            <td>
              <el-input v-model="reportid" style="width:160px"></el-input>
            </td>

          </tr>
          <tr>
            <td align="right">时间</td>
            <td colspan="3">
              <el-date-picker v-model="LogDatetime1" type="datetime" placeholder="开始日期" value-format="yyyy/M/dd HH:mm:ss"
                style="width:190px" :clearable="false"></el-date-picker> 至
              <el-date-picker v-model="LogDatetime2" type="datetime" placeholder="结束日期" value-format="yyyy/M/dd HH:mm:ss"
                style="width:190px" :clearable="false"></el-date-picker>
            </td>
            <td align="right">日志内容</td>
            <td colspan="5">
              <el-input v-model="LogContent" style="width: 390px"></el-input>
              <el-checkbox v-model="Contentflag" style="margin-left:5px">不包含</el-checkbox>
            </td>
            <!-- <td align="right" colspan="11">
                          <el-button icon="el-icon-search" type="primary" @click="tablePage.currentPage = 1,SearchLog(1)">查询</el-button>
                          <el-button @click="ExportLog()">下载日志</el-button>
                      </td> -->
          </tr>
        </table>
        <div style="padding-right:5px;width:100%;text-align:right">
          <el-button icon="el-icon-search" type="primary" @click="tablePage.currentPage = 1, SearchLog(1)">查询</el-button>
          <el-button @click="ExportLog()">下载日志</el-button>
        </div>
      </div>
    </div>
    <div class="pagecenter">
      <div class="middle-center">
        <div class="middle-left-top">
          <vxe-table :data="tableLogDataS" :select-config="{ tigger: 'row' }" :sort-config="{ trigger: 'cell' }"
            :scroll-y="{ rHeight: '50px' }" @current-change="currentListChangeEvent" @cell-dblclick="list_dbclick"
            height="100%" highlight-current-row highlight-hover-row ref="xTableLog" resizable highlight-hover-column
            border show-header-overflow="ellipsis" show-overflow="ellipsis" class="mytable-style"
            :cell-class-name="CellClassName" :row-class-name="RowClassName" header-align="center" :loading="loadingstatus"
            :start-index="(tablePage.currentPage - 1) * tablePage.pageSize" size="mini" width="100%">
            <vxe-table-column :field="item.field" :title="item.title" :width="item.width" header-align="center"
              :align="item.align" v-for="(item) in tableLogColumn" sortable v-bind:key="item.field">
            </vxe-table-column>
          </vxe-table>
        </div>
        <vxe-pager :current-page="tablePage.currentPage" :page-sizes="tablePage.pageSizes" :page-size="tablePage.pageSize"
          :total="tablePage.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
          @page-change="handlePageChange"></vxe-pager>
      </div>
      <div class="rightbtn">
        <el-button icon="el-icon-document-copy" type="primary" @click="copytxt()">复制</el-button>
      </div>
      <div class="middle-right logtext" ref="logdiv" v-html="logcontentright">
      </div>
    </div>
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" title="日志查看" :visible.sync="popvisible" width="800px"
      style="padding: 5px 5px 5px 5px" top="6vh">
      <el-button icon="el-icon-document-copy" style="position: absolute;top:36px;right:36px; " type="primary"
        @click="copytxt(2)">复制</el-button>
      <div v-loading="poploading" style="width:100%;height:630px;">
        <textarea style="width:100%;border:0px;background-color:white;height:630px;" v-model="popcontentright"
          ref="poparea" readonly :disabled="popareadisabled"></textarea>
      </div>
    </el-dialog>

    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择登录IP"
      :visible.sync="dialogIPVisible" v-if="dialogIPVisible">
      <rm-pop-common @change="SelectIPUser" @cancel="dialogIPVisible = false;" datatype="ipcomputeruser"></rm-pop-common>
    </el-dialog>

    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择程序代号"
      :visible.sync="dialogPrgVisible" v-if="dialogPrgVisible">
      <rm-pop-common @change="SelectPrgno" @cancel="dialogPrgVisible = false;" datatype="prgno"
        dataname="程序代号"></rm-pop-common>
    </el-dialog>
    <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择仪器解码"
      :visible.sync="dialogInstrVisible" v-if="dialogInstrVisible">
      <rm-pop-common @change="SelectPrgno" @cancel="dialogInstrVisible = false;" datatype="instrdec"
        dataname="仪器解码"></rm-pop-common>
    </el-dialog>
    <textarea ref="descarea" style="position: absolute;width: 0px;height: 0px;" v-model="copytxtarea"></textarea>
  </div>
</template>

<script type="text/javascript">
export default {
  name: "showlog",
  data() {
    return {
      //日志dialog
      tableLogColumn: [],
      tableLogDataS: [],
      LogClientip: "",
      LogClientipTmp: "",
      LogDatetime1: "",
      LogDatetime2: "",
      LogType: 1,
      LogClientName: "",
      LogPrgno: "",
      LogPrgnoName: "",
      LogLevel: "",
      LogContent: "",
      Contentflag: false,
      LogComputerName: "", //登录电脑
      LogUser: "", //用户
      reportid: "", //报告ID
      barcode: "", //条码号

      ComputerOption: [], //计算机名称选项
      LogUserOption: [], //登陆人选项

      logcontentright: "",
      timetype: true,
      tablePage: {
        currentPage: 1,
        pageSize: 100,
        totalResult: 0,
        pageSizes: [100, 500, 1000, 5000]
      },
      Hisinterface: [],
      hisinter: [],
      Hidetopflag: true,
      PrgData: [],
      loadingstatus: false,
      areadisabled: true,
      popareadisabled: true,
      popvisible: false,
      popcontentright: "",
      poploading: false,
      dialogIPVisible: false, //IP弹窗标志
      dialogPrgVisible: false, //程序代号弹框标志
      dialogInstrVisible: false, //仪器解码弹框标志
      copytxtarea: "",
    };
  },
  created() {
    this.InitPageData();
  },
  mounted() { },
  updated() { },
  methods: {
    InitPageData() {
      this.$tool
        .request({
          url: "/ucent/logread",
          method: "post",
          data: {
            action: "init"
          }
        })
        .then(res => {
          var now2 = res.Now2.replace("00:00:00", "23:59:59");
          this.LogDatetime1 = res.Now2;
          this.LogDatetime2 = now2;
          this.tableLogColumn = res.Cols;
          if (res.currentip) this.LogClientip = res.currentip;
          this.LogClientipTmp = this.LogClientip;
          //this.PrgData = res.sysdt;
          //this.ComputerOption = this.DealTreeData(res.computernamedt);
          if (res.hisinterface) {
            for (let i = 0; i < res.hisinterface.length; i++) {
              var onehis = { value: res.hisinterface[i].his_code, label: res.hisinterface[i].his_name };
              this.Hisinterface.push(onehis);
            }
          }
        })
        .catch(err => { });
    },
    SearchLog(type) {
      this.loadingstatus = true;
      // var hisname = "";
      // if (this.hisinter.length > 0) {
      //     for (let i = 0; i < this.hisinter.length; i++) {
      //         hisname += "'" + this.hisinter[i] + "',";
      //     }
      // }
      this.tableLogDataS = [];
      this.tablePage.totalResult = 0;
      this.currentPage = 1;
      this.$tool
        .request({
          url: "/ucent/logread",
          method: "post",
          timeout: 600000,
          data: {
            action: "query",
            inittype: 1,
            LogClientip: this.LogClientip,
            LogDatetime1: this.LogDatetime1,
            LogDatetime2: this.LogDatetime2,
            LogType: this.LogType,
            HisName: this.hisinter,
            LogClientName: this.LogClientName,
            LogPrgno: this.LogPrgno,
            LogLevel: this.LogLevel,
            LogContent: this.LogContent,
            Contentflag: this.Contentflag ? "1" : "0",
            LogUser: this.LogUser,
            LogComputerName: this.LogComputerName,
            reportid: this.reportid,
            barcode: this.barcode,
            PageSize: this.tablePage.pageSize,
            currentPage: this.tablePage.currentPage
          }
        })
        .then(res => {
          if (res.flag == -1) {
            this.$alert(res.msg);
          } else {
            this.tableLogDataS = res.Data;
            this.tablePage.totalResult = res.Count;
            if (this.tableLogDataS && this.tableLogDataS.length > 0) {
              this.QueryContent(this.tableLogDataS[0].logid, this.tableLogDataS[0].threadguid);
            }
          }
          this.loadingstatus = false;
        });
    },
    prgnoinput(value) {
      this.LogPrgno = value;
      //this.LogPrgno = value;
    },
    currentListChangeEvent({ row }) {
      this.QueryContent(row.logid, row.threadguid);
    },
    QueryContent(logid, threadguid) {
      this.$tool
        .request({
          url: "/ucent/logread",
          method: "post",
          data: {
            action: "queryone",
            logid: logid,
            logtype: this.LogType,
            threadguid: threadguid,
          }
        })
        .then(res => {
          if (res.errcode == "1") {
            this.logcontentright = res.logcontent;
          } else {
            this.$alert(res.errmsg, "提示");
          }
        });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.SearchLog(2);
    },
    ExportLog() {
      this.$refs.xTableLog.exportCsv({ filename: "日志.csv" });
    },
    //输入建议匹配
    querySearch(queryString, cb) {
      this.LogPrgno = queryString;
      var datas = this.PrgData;
      var results = queryString ? datas.filter(item => item.hidkey.toUpperCase().indexOf(queryString.toUpperCase()) > -1 || item.hidname.toUpperCase().indexOf(queryString.toUpperCase()) > -1) : datas;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(item) {
      this.LogPrgno = item.hidkey;
      this.LogPrgnoName = item.hidname;
    },
    copytxt(type) {
      if (type == 2) {
        this.popareadisabled = false;
        this.$nextTick(() => {
          this.$refs.poparea.select();
          if (document.execCommand("copy", false, null)) {
          } else {
            messageBox("复制失败，请检查浏览器是否支持复制操作！", -1);
          }
          this.popareadisabled = true;
        });
      } else {
        this.copytxtarea = this.$refs.logdiv.innerText
        var _this = this;
        this.$nextTick(() => {
          console.log(_this.$refs.descarea);
          _this.$refs.descarea.select();
          if (document.execCommand("copy", false, null)) {
          } else {
            messageBox("复制失败，请检查浏览器是否支持复制操作！", -1);
          }
          _this.copytxtarea = "";
          // this.areadisabled = true;
        });
      }
    },
    //切换电脑名称刷新用户
    getUsers(val) {
      this.$tool
        .request({
          url: "/ucent/logread",
          method: "post",
          data: {
            action: "getusers",
            computername: val,
            ip: this.LogClientip
          }
        })
        .then(res => {
          if (res.errcode == "1") {
            this.LogUserOption = res.userdt;
          } else {
            this.$alert(res.errmsg, "提示");
          }
        });
    },
    handleChange() { },
    DealTreeData(dt) {
      var redt = [];
      for (let i = 0; i < dt.length; i++) {
        var findone = redt.find(item => item.value == dt[i].logcomputer);
        if (findone) {
          if (findone.hasOwnProperty("children")) {
            var findname = findone.children.find(item => item.value == dt[i].computername);
            if (findname) {
              var finduser = findname.children.find(item => item.value == dt[i].userno);
              if (!finduser) findname.children.push({ value: dt[i].userno, label: dt[i].username });
            } else {
              findone.children.push({ value: dt[i].computername, label: dt[i].computername, children: [{ value: dt[i].userno, label: dt[i].username }] });
            }
          } else {
            findone.children = [{ value: dt[i].computername, label: dt[i].computername, children: [{ value: dt[i].userno, label: dt[i].username }] }];
          }
        } else {
          var length = redt.length;
          redt.push({ label: dt[i].logcomputer, value: dt[i].logcomputer });
          redt[length].children = [{ value: dt[i].computername, label: dt[i].computername, children: [{ value: dt[i].userno, label: dt[i].username }] }];
        }
      }
      console.log("redt", redt);
      return redt;
    },
    popbigtab() {
      this.dialogIPVisible = true;
    },
    SelectIPUser(code, name, row) {
      this.LogClientip = code;
      this.dialogIPVisible = false;
    },
    SelectPrgno(code, name, row) {
      this.LogPrgno = code;
      this.LogPrgnoName = name;
      this.dialogPrgVisible = false;
      this.dialogInstrVisible = false;
    },
    list_dbclick({ row, columnIndex }) {
      if (columnIndex == 0) {
        console.log(row.logdt);
        var dt1 = new Date(row.logdt);
        dt1.setMilliseconds(0);
        this.LogDatetime1 = dt1;
        var dt2 = new Date(row.logdt);
        dt2.setMilliseconds(1000);
        this.LogDatetime2 = dt2;
      }
    },
    RowClassName({ row, rowIndex }) {
      //console.log('row.rowcolor',row.rowcolor);
      return (row.rowcolor % 2) == 0 ? "row-gray" : "";
    },
    CellClassName({ row, rowIndex, column, columnIndex }) {
      if (column.property === "loglevel" || column.property === "loglevelname") {
        if (row.loglevel == "ERROR" || row.loglevel == "SQLOT") {
          return "col-red";
        }
      }
    },
    logtype_change() {
      if (this.LogType == "1") {
        this.LogClientip = this.LogClientipTmp;
      } else {
        this.LogClientip = "";
      }
      this.LogPrgnoName = "";
      this.LogPrgno = "";
    },
  }
};
</script>

<style scoped>
.pagetop {
  left: 0;
  right: 0;
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  border: solid 1px #ccc;
  position: absolute;
  z-index: 99;
  height: 125px;
  overflow-x: auto;
  overflow-x: overlay;
}

.middle-left-top {
  height: calc(100% - 46px);
}

.pagecenter {
  position: absolute;
  top: 130px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: hidden;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 605px;
  overflow: hidden;
}

.middle-left {
  position: absolute;
  height: 100%;
  width: 500px;
  left: 0px;
  top: 0;
}

.middle-right {
  position: absolute;
  top: 0;
  bottom: 2px;
  width: 600px;
  right: 0px;
}

.logtext {
  overflow: auto;
  font-size: 14px;
  border: #ccc 1px solid;
  padding: 3px;
}

.rightbtn {
  z-index: 90;
  position: absolute;
  top: 3px;
  right: 13px;
}

.poppagetop {
  width: 100%;
  height: 40px;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  position: absolute;
  border: 1px solid #ccc;
  z-index: 999;
}

.poppagecenter {
  position: absolute;
  top: 50px;
  width: 100%;
  left: 0;
}

.popmiddle-left {
  background-color: aqua;
  position: absolute;
  height: 450px;
  width: 480px;
  left: 0px;
  overflow: auto;
}

.popmiddle-center {
  position: absolute;
  -webkit-box-align: center;
  height: 100%;
  left: 485px;
  right: 485px;
}

.popmiddle-right {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 450px;
  width: 480px;
  right: 0px;
  border: 1px solid #ccc;
}

.table1style tr td {
  padding: 0px 2px 0px 5px;
  white-space: nowrap;
}

table {
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 3px;
}

::v-deep .el-checkbox {
  margin-right: 5px;
}

::v-deep .el-checkbox__label {
  padding-left: 5px;
}

::v-deep .el-input--suffix .el-input__inner {
  padding-right: 0px;
}

::v-deep .mytable-style .col-red {
  color: red;
}

::v-deep .mytable-style .row-gray {
  background-color: #e9e6e6 !important;
}

::v-deep .mytable-style .col-blue {
  color: blue;
}

.keyword {
  color: red;
}</style>